<template>
  <div>
    <iframe :src="props.rootUrl" id="myIframe" scrolling="no" frameBorder="0"></iframe>
    <!-- <material-card class="card" /> -->
    <!-- <LineBorder/> -->
    <div v-if="props.pageConfig.borders" class="borders">
      <div v-for="(item, index) in props.pageConfig.borders">
        <LineBorder v-if="item.borderType == 1" :title="item.title" :style="item.style" />
        <GradientBorder v-else-if="item.borderType == 2" :title="item.title" :style="item.style" />
      </div>
    </div>
  </div>
</template>

<script setup>
import MeterialCard from './Card/MaterialCard.vue'
import LineBorder from './Border/LineBorder.vue'
import GradientBorder from './Border/GradientBorder.vue'
var props = defineProps({
  rootUrl: {
    type: String,
    default: 'http://127.0.0.1:8070/'
  },
  pageConfig: {
    type: Object,
    default: {}
  }
})

if (props.pageConfig.borders) {

}
console.info("props.pageConfig.borders", props.pageConfig.borders)
</script>

<style scoped>
#myIframe {
  width: 100vw;
  height: 100vh;
}

.borders {
  position: absolute;
  top: 10px;
  left: 10px;
}
</style>